<template>
    <div v-if="goods.id">
        <el-card class="main" shadow="never">
            <el-row :gutter="20">
                <el-col :span="3">

                    <el-row>
                        <el-col :span="24" v-for="(item,index) in goods.imgs" :key="index" class="m-t-1">
                            <div v-if="index < 6">
                                <el-image :src="goods.imgs[index]" class="img" fit="fit" :preview-src-list="goods.imgs" />
                            </div>
                        </el-col>
                    </el-row>

                </el-col>
                <el-col :span="12">
                    
                    <div>
                        <el-carousel :height="'500px'" :interval="3500">
                        <el-carousel-item v-for="(item,index) in goods.imgs" :key="index">
                            <!-- 引用放大镜组件 -->
                            <vue-photo-zoom-pro class="photo" :url="goods.imgs[index]" :scale="2" />
                        </el-carousel-item>
                        </el-carousel>
                    </div>

                </el-col>
                <el-col :span="9">
                    
                    <el-row>
                        <!-- 标题与价格 -->
                        <el-col :span="24">
                            <el-row class="title_bar">
                                <el-col :span="16">
                                    <span class="title" v-text="goods.name" />
                                </el-col>
                                <el-col :span="8" class="text">
                                    <span class="price" v-text="'￥ '+goods.price" /><br />
                                    <span class="price2" v-text="'原价:'+goods.price*1.25" />
                                </el-col>
                            </el-row>
                        </el-col>
                        <!-- 文字介绍 -->
                        <el-col :span="24" class="lin">
                            <hr />
                            <span v-text="goods.text" />
                            <hr />
                        </el-col>
                        <!-- 商品规格选择 -->
                        <el-col :span="24">
                            <div class="m-t-1">
                                <div class="m-t-1" v-for="(item,index) in goods.options" :key="index">
                                    <div v-if="index < 5"> 
                                        <span class="subtitle">{{ item.name }}：</span>
                                        <el-radio-group v-model="item.value" v-for="(items,index) in item.list" :key="index" fill="#ff6165">
                                            <el-radio-button :label="items.value" style="margin: 2px;" :disabled="items.disabled" >{{ items.text }}</el-radio-button>
                                        </el-radio-group>
                                    </div>
                                </div>
                            </div>
                            <hr />
                        </el-col>
                        <!-- 数量 -->
                        <el-col :span="24" class="lin">
                            <el-row>
                                <el-col :span="6">
                                    <span>数量选择：</span>
                                </el-col>
                                <el-col :span="18">
                                    <el-input-number v-model="order.num" :min="1" :max="10" size="small" controls-position="right"></el-input-number>
                                </el-col>
                            </el-row>
                        </el-col>
                        <!-- 服务说明 -->
                        <el-col :span="24" class="lin">
                            <el-row>
                                <el-col :span="6">
                                    <span>服务说明：</span>
                                </el-col>
                                <el-col :span="18">
                                    <span>"包邮"，7天无理由退换</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <!-- 操作按钮 -->
                        <el-col :span="24" class="lin">
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <div class="title_bar">
                                        <span class="price" v-text="'￥ '+goods.price" /><br />
                                        <span class="price2" v-text="'原价:'+goods.price*1.25" />
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div>
                                        <el-button class="button" @click="onBuy(goods.id, order.num, spec)">立刻下单</el-button>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div>
                                        <el-button class="button" @click="onCart(goods.id, order.num, spec)">加入购物车</el-button>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    
                </el-col>
            </el-row>
        </el-card>
        <el-card class="vice" shadow="never">
            <div >
                <detail />
            </div>
        </el-card>
    </div>
    <div v-else>
        <page404 text="商品未找到" />
    </div>
</template>

<script>
import detail from '@/components/goods/detail'; // 细节
import page404 from '@/views/page/error'; // 404 页面

  export default {
    name: 'info',
    components: {
        detail, page404
    },
    watch: {
        // 商品数量不可不存在
        'order.num'(value = this.order.num) {
            value==undefined?this.order.num=1:'';
        }
    },
    data() {
        return {
            // 商品
            // goods1: {
            //     name: '网易云音乐享乐系列金色波纹自动折叠伞', // 商品名
            //     text: '防晒防紫外线 一键开合 晴雨两用', // 简单的介绍
            //     id: this.$route.params.id, // 商品ID
            //     // 价格
            //     price: {
            //         present: '49.00', // 现价
            //         original: '128.00', // 原价
            //     },
            //     // 
            //     amount: {
            //         num: 1, // 初始值和当前购买量
            //         min: 1, // 可单次购买的最小量
            //         max: 10, // 可单次够买的最大量
            //     },
            //     // 图片集
            //     imgs: [
            //         'https://p4.music.126.net/RrzErVGIWPJ-y0H24_pDnQ==/109951165015784076.jpg',
            //         'https://p3.music.126.net/z_hYrEqZgJB79daVSY7q4Q==/109951165015779708.jpg',
            //         'https://p3.music.126.net/-qeuMZIetDVoY1SnZjV5iA==/109951165015785576.jpg',
            //         'https://p4.music.126.net/JFZVW7e6VrEXJiJkkaDddw==/109951165015782591.jpg',
            //         'https://p4.music.126.net/WRcOwtAu4407olWgWOZVhA==/109951165015787018.jpg',
            //         'https://p3.music.126.net/z_hYrEqZgJB79daVSY7q4Q==/109951165015779708.jpg',
            //     ],
            //     // 规格选项
            //     options: [
            //         {
            //             name: '颜色', // 规格名
            //             value: 'dark', // 默认选中值
            //             list: [
            //                 // 文本，实际值，是否禁选
            //                 {text:'红色',value:'red', disabled: true}, // 红色，red，不可选
            //                 {text:'黑色',value:'dark'},
            //                 {text:'蓝色',value:'blue'}
            //             ],
            //         },
            //         {
            //             name: '骨架',
            //             value: '5',
            //             list: [
            //                 {text:'五骨',value:'5'},
            //                 {text:'八骨',value:'8'}
            //             ],
            //         },
            //         {
            //             name: '型号',
            //             value: '1',
            //             list: [
            //                 {text:'标准版',value:'1'},
            //                 {text:'升级版',value:'2'} // 金额
            //             ],
            //         }
            //     ]
            // },
            goods: {
                id: true,
            },
            order: {
                num: 1,
            },
      };
    },
    computed: {
        // 提取规格选项里确定的值
        spec() {
            let value = this.goods.options, value2 = [];
            for (let i = 0; i < value.length; i++) {
               value2[i] = value[i].value;
            }
            return value2;
        },
    },
    methods: {
        // 下单
        onBuy(id, num, spec) {
            console.log(id,num,spec)
        },
        // 购物车
        onCart(id, num, spec) {
            console.log('已加入购物车')
        },
    },
    mounted(){
        // 获取商品数据
        {       
            let _this = this;
            this.$get(this.$api.goods, {
                type: 'query',
                id: _this.$route.params.id,
            })
            .then(function (res) {
                _this.goods = res;
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    }
  };
</script>


<style lang="less">
.main {
    height: 600px;
    .img {
        height: 80p;
        width: 80px;
    }
    .title_bar{
        height: 75px;
        /* background: #262626; */
        .title {
            font-size: 24px;
            /* font-weight: 10px; */
        }
        .price {
            font-weight: bold;
            color: #d1392b;
            font-size: 24px;
        }
        .price2 {
            color: #666;
            font-size: 14px;
            text-decoration: line-through;
        }
    }
    .text {
        text-align: center;
    }
    .lin {
        height: 50px;
    }
    .button {
        min-width: 100px;
    }
    .hr {
        height: 0.01px;
        background: #262626;
    }
}
.vice {
    margin-top: 20px;
    height: 500px;
}
</style>